<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table border="1">
    <caption>篮球</caption>
    <tr>
      <th>商品</th>
      <th>价格</th>
      <th>颜色</th>
    </tr>
  </table>
</body>
<script>
  // let p1 = {};
  // p1.name = "张三";
  // p1.age = 18;
  // p1.run = function () {
  //   console.log(this.name + ":" + this.age);
  // }
  // p1.run();
  //
  // let p2 = {
  //   name: "李四",
  //   age: 30,
  //   run: function () {
  //     console.log(this.name+": "+this.age)
  //   }
  // }
  // p2.run();
  //
  // let product = {title: "斯伯丁篮球",price: 108,color: "红色"};
  let arr = [
    {title: "斯伯丁篮球", price: 108, color: "红色"},
    {title: "威尔逊篮球", price: 158, color: "花色"},
    {title: "李宁篮球", price: 98, color: "蓝色"}
  ];

  let table = document.querySelector("table");
  for (let p of arr) {
    let tr = document.createElement("tr");
    let titleTd = document.createElement("td");
    let priceTd = document.createElement("td");
    let colorTd = document.createElement("td");

    titleTd.innerText = p.title;
    priceTd.innerText = p.price;
    colorTd.innerText = p.color;
    tr.append(titleTd, priceTd, colorTd);
    table.append(tr);
  }
</script>
</html>